<template>
  <div class="container">
    <div class="header">
      <van-nav-bar
        title="提交订单"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <!-- 收货地址信息 -->
      <div class="location">
        <div class="checkLocal">
          <div class="checkIt">选择收货地址</div>
          <div @click="$router.push({ path: '/address' })">&gt;</div>
        </div>

        <div class="timeit">
          <div>立即送出</div>
          <div class="ontime">15:59-16:14送达&gt;</div>
        </div>
        <span class="tips">因配送订单较多，送达时间可能波动</span>
      </div>
      <!-- 支付方式 -->
      <div class="paymethod">
        <div>支付方式</div>
        <div><span>赠3元外卖券</span>极速支付></div>
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="(item, index) in orderList" :key="index">
          <div class="prodetail">
            <div class="storename">
              <div>炸串拌饼&emsp;(好吃快买)</div>
              <div>优购快送</div>
            </div>

            <van-card
              :num="item.num"
              tag="折"
              :price="item.price"
              desc="巨大折扣，巨大优惠"
              :title="item.name"
              :thumb="item.url"
              :origin-price="item.oldPrice"
            />
          </div>
        </van-cell>
      </van-list>

      <!-- 优惠券 -->
      <div class="coupons">
        <van-coupon-cell
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          @click="showList = true"
          :editable="true"
        />
        <!-- 优惠券列表 -->
        <van-popup
          v-model="showList"
          round
          position="bottom"
          style="height: 90%; padding-top: 4px"
        >
          <van-coupon-list
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            :disabled-coupons="disabledCoupons"
            @change="onChange"
            @exchange="onExchange"
          />
        </van-popup>
      </div>

      <!-- 支付 -->
      <div class="pay">
        <div class="price">总价￥{{ totalPrice }}</div>
        <div>找人付</div>
        <div>极速支付</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalPrice: 0,
      totaloldPrice: 0,
      orderList: [],
      showList: false,
      chosenCoupon: -1,

      loading: false,
      finished: false,
      coupons: [
        {
          available: 1,
          condition: "无使用门槛\n最多优惠12元",
          reason: "",
          value: 150,
          name: "优惠券名称",
          startAt: 1489104000,
          endAt: 1514592000,
          valueDesc: "1.5",
          unitDesc: "元",
        },
        {
          available: 2,
          condition: "无使用门槛\n最多优惠12元",
          reason: "",
          value: 150,
          name: "优惠券名称",
          startAt: 1489104000,
          endAt: 1514592000,
          valueDesc: "8.8",
          unitDesc: "折",
        },
      ],
      disabledCoupons: [
        {
          available: 1,
          condition: "单纯的不准用\n最多优惠12元",
          reason: "",
          value: 150,
          name: "只准看不准用",
          startAt: 1489104000,
          endAt: 1514592000,
          valueDesc: "1.5",
          unitDesc: "元",
        },
        {
          available: 2,
          condition: "也很单纯\n最多优惠12元",
          reason: "",
          value: 150,
          name: "气死你",
          startAt: 1489104000,
          endAt: 1514592000,
          valueDesc: "8.8",
          unitDesc: "折",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    onLoad() {
      this.finished = true;
    },
  },
  created() {
    let list = this.$store.getters.cartList;
    this.totalPrice = this.$store.getters.totalPrice / 100;

    this.orderList = list.filter((item) => item.state == true);
  },
};
</script>

<style scoped>
.header {
  background: linear-gradient(#ffcc33 20%, #f0f0f0 30%);
  height: 750px;
  width: 100%;
}
/* 头部导航 */
.van-nav-bar {
  color: black;
  background-color: #ffcc33;
  height: 50px;
}
/* 收货地址信息 */
.location {
  background-color: #fff;
  width: 97%;
  height: 120px;
  border-radius: 10px;
  margin: 0 auto;
  margin-bottom: 10px;
}
.checkLocal {
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  width: 94%;
  margin: 0 auto;
}
.checkIt {
  color: rgb(247, 162, 5);
  font-size: 20px;
}
/* 送达时间 */
.timeit {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  width: 94%;
  margin: 0 auto;
  margin-bottom: 3px;
}
.ontime {
  color: #ffcc33;
}

.tips {
  display: block;
  font-size: 14px;
  color: rgb(242, 180, 64);
  width: 94%;
  margin: 0 auto;
}
/* 支付方式 */
.paymethod {
  height: 50px;
  display: flex;
  justify-content: space-between;
  width: 97%;
  margin: 0 auto;
  font-size: 16px;
  line-height: 50px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 10px;
}
.paymethod div:first-child {
  margin-left: 6px;
}
.paymethod div:nth-child(2) {
  margin-right: 6px;
}
.paymethod span {
  font-size: 14px;
  margin-right: 4px;
}
/* 商品列表组件 */
.van-list {
  height: 400px;
  /* overflow: hidden; */
}
/* 商品细节组件 */
.van-cell {
  height: 200px;
}
/* 优惠券 */
.coupons {
  height: 50px;
}
.coupons .van-coupon-cell {
  height: 50px;
}
.coupons .van-popup {
  height: 50px;
}
.prodetail {
  width: 97%;
  border-radius: 10px;
  background-color: #fff;
  margin: 0 auto;
}
.prodetail .storename {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgb(245, 242, 242);
}
.prodetail .storename div:first-child {
  font-size: 14px;
  margin-left: 6px;
}
.prodetail .storename div:nth-child(2) {
  font-size: 12px;
  color: gray;
  margin-right: 6px;
}
/* 最后支付 */
.pay {
  width: 97%;
  height: 50px;
  border-radius: 25px;
  display: flex;
  background-color: rgb(41, 36, 36);
  line-height: 50px;
  position: fixed;
  bottom: 0;
  left: 6px;
}
.pay div:first-child {
  width: 60%;
  height: 100%;
  color: white;
  font-weight: 400;
  font-size: 18px;
}
.pay div:nth-child(2) {
  width: 20%;
  height: 100%;
  background-color: grey;
  font-size: 16px;
  color: #ffcc33;
  text-align: center;
}
.pay div:nth-child(3) {
  width: 20%;
  background-color: #e8b92b;
  font-size: 16px;
  border-bottom-right-radius: 25px;
  border-top-right-radius: 25px;
  text-align: center;
}
</style>